<template>
    <div>
        <a-form-model :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
            <a-form-model-item label="网络类型">
                <a-radio-group v-model="form.ipType" :disabled="disabled">
                    <a-radio value="auto"> 自动获取IP地址 </a-radio>
                    <a-radio value="manual"> 使用下面的IP地址 </a-radio>
                </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="IP地址">
                <a-input
                    v-model="form.ipAddress"
                    :disabled="disabled || form.ipType === 'auto'"
                />
            </a-form-model-item>
            <a-form-model-item label="子网掩码">
                <a-input
                    v-model="form.subnetMask"
                    :disabled="disabled || form.ipType === 'auto'"
                />
            </a-form-model-item>
            <a-form-model-item label="网关">
                <a-input
                    v-model="form.gateway"
                    :disabled="disabled || form.ipType === 'auto'"
                />
            </a-form-model-item>
            <a-form-model-item label="DNS">
                <a-input
                    v-model="form.dns"
                    :disabled="disabled || form.ipType === 'auto'"
                />
            </a-form-model-item>
        </a-form-model>
    </div>
</template>

<script>
export default {
    name: 'WanConfig',
    props: {
        disabled: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            form: {
                ipType: 'manual',
                ipAddress: '192.168.2.101',
                subnetMask: '255.255.255.0',
                gateway: '192.168.2.1',
                dns: '192.168.2.1'
            }
        }
    },
    methods: {
        getConfig() {
            return { ...this.form }
        },
        setConfig(config) {
            this.form = { ...this.form, ...config }
        }
    }
}
</script>

<style scoped>
.ant-form-item {
    margin-bottom: 0;
}
</style>
